<template>
    <el-main class="container-box">
        <div class="container-content">
            <el-form label-position="top" label-width="210px">
                <el-form-item label="" v-for="(v, k) in permissionsCfg" :key="k">
                    <template #label>
                        <h4>{{ v.title }}</h4>
                    </template>
                    <el-checkbox-group v-model="routerNames">
                        <div class="desc margin0">
                            {{ v.desc }}
                        </div>
                        <div class="form-item" v-for="(item, k) in v.routerNames">
                            <el-checkbox class="form-item-check-box" :value="item.routerName">
                                {{ item.text }}
                            </el-checkbox>
                            <div class="desc">
                                <span>{{ item.desc }}</span>
                            </div>
                        </div>
                    </el-checkbox-group>
                </el-form-item>
                <el-button size="default" type="primary" @click="start">刷新</el-button>
                <el-button size="default" type="primary" @click="submitupdate">保存</el-button>
            </el-form>
        </div>
    </el-main>
</template>

<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { computed, onMounted, ref } from "vue";
import { useStore } from "vuex";
import { asynccreateteamrole, selectteamrole } from "../../../api";
import { Storekey } from "../../../interface";

const permissionsCfg = [
    // {
    //     desc: "设置以下菜单展示",
    //     title: "菜单展示", routerNames: [
    //         { routerName: "题库", text: "题库", desc: "" },
    //         { routerName: "题单", text: "专题", desc: "" },
    //         { routerName: "任务", text: "任务", desc: "" },
    //         { routerName: "竞赛", text: "比赛", desc: "" },
    //         { routerName: "评测", text: "评测", desc: "" },
    //         { routerName: "云课堂", text: "云课堂", desc: "" },
    //     ],
    // },
    {
        desc: "111",
        title: "学生功能控制", routerNames: [
            { routerName: "评测", text: "评测列表", desc: "选中则给所有人显示，未选中则只有老师/管理员可见" },
            // { routerName: "题目讨论", text: "允许题目讨论", desc: "是否允许学生发表和查看题目讨论" }, // 默认选中
            { routerName: "比赛总结", text: "比赛总结", desc: "选中则学生可见参与的比赛中其他学生的总结内容，未选中则学生只能看见自己的总结内容" }, // 默认不勾选
            // { routerName: "题目题解", text: "题目题解", desc: "是否公开题目题解（若不勾选则只有老师可见）" },
        ],
    }
]

const roleName = "学生"

const store = useStore(Storekey)
// 当前登录用户
const user = computed(() => {
    return store.state.user;
});
const teamId = computed(() => {
    return user.value?.teamid;
});

const routerNames = ref<any[]>([])
const ID = ref()
async function getPermissionsCfg() {
    const { count, rows } = await selectteamrole({
        teamid: teamId.value, name: roleName
    })
    // 
    routerNames.value = rows[0]?.routername || []
    ID.value = rows[0]?.ID
}
// 保存
function submitupdate() {
    asynccreateteamrole({
        ID: Number(ID.value),
        teamid: Number(teamId.value),
        name: roleName,
        routername: routerNames.value
    }).then(e => {
        ElMessage.success("保存成功");
    }).catch(f => {
        ElMessage.error(f);
    })
}

async function start() {
    getPermissionsCfg()
}

onMounted(() => {
    start();
});

</script>

<style scoped>
.container-box {
    display: flex;
}

.container-content {
    margin: 0;
}

.form-item {
    margin: 15px 20px;
    width: 100%;
    display: flex;
    align-items: center;
}

.form-item-check-box {
    width: 110px;
    font-size: 14px !important;
}

.desc {
    margin: 0 40px;
    font-size: 14px;
    color: #7f7f7f;
    /* width: 400px; */
    line-height: 30px;
}

.btn-box {
    line-height: 30px;
}

.container-right,
.container-right-table {
    width: 30vw;
    height: 80vh;
}
</style>